<template>
    <div class="page" data-page="newPhoneNum" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link back" @click="$root.backToTab()">
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="link-page-top" style="padding-bottom: 17px;">
            <div class="link-page-title">绑定新手机号</div>
        </div>
        <div class="page-content">
            <div class="list inline-labels no-hairlines-md bdphoneNum" style="margin: 20px 0px;">
                <ul>
                    <li class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label" style="width: 20%">手机号</div>
                            <div class="item-input-wrap">
                                <input type="number" id="newPhoneNum" placeholder="请输入手机号">
                            </div>
                            <div style="margin-left: 13px;">
                                <button class="col button button-fill btn-vCode"  @click="gain" style="font-size: 12px">获取验证码</button>
                            </div>
                        </div>
                    </li>
                    <li class="item-content item-input">
                        <div class="item-inner">
                            <div class="item-title item-label" style="width: 20%">验证码</div>
                            <div class="item-input-wrap">
                                <input type="number" id="VcCode" placeholder="请输入验证码">
                                <!--<span class="input-clear-button"></span>-->
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

            <div class="block">
                <div class="myrow">
                    <a href="#" class="col button button-fill mybutton-round"  @click="commit">绑定</a>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                cdCode:null,
            }
        },
        // Component Methods
        methods: {
            //倒计时功能
            get_code_time_ : function($input,wait) {
                var app = this.$app;
                var self = this;
                common.loading(0);
            if (wait == 0) {
                $input.removeAttr("disabled");
                $input.html("重新发送");
                wait = 60;
            } else {
                $input.attr("disabled", true);
                $input.html(wait + "s");
                wait--;
                self.cdCode = setTimeout(function () {
                    self.get_code_time_($input, wait);
                }, 1000)
            }
        },
            //绑定

            commit: function () {
                var app = this.$app;
                var self = this;

                var phoneNum = $("#newPhoneNum").val();
                if(phoneNum == ''){
                    app.methods.showToastBottom("请输入正确的手机号！");
                    return;
                }
                var VcCode = $("#VcCode").val();
                if(VcCode == ''){
                    app.methods.showToastBottom("请输入验证码！");
                    return;
                }
                common.loading(1);
                Dao.mdMobile({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    code:VcCode,
                    type:2,
                    oldMobile:userInfor.phone,
                    newMobile:$("#newPhoneNum").val(),
                },function(data){
                    common.loading(0);
                    app.methods.showToastBottom('修改绑定手机号成功');
                    userInfor.phone = $("#newPhoneNum").val();
                },function(e) {
                  common.loading(0);
                  app.methods.showToastBottom('修改绑定手机号失败');
                },false);
                app.methods.backToTab();
            },
            //获取验证码
            gain:function () {
                var app = this.$app;
                var self = this;
                var phoneNum = $("#newPhoneNum").val();
                if(phoneNum == ''){
                    app.methods.showToastBottom("请输入正确的手机号");
                    return;
                }
                common.loading(1);
                Dao.getSmsCode({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    mobile:phoneNum,
                    type:2
                },function(data){
                    self.get_code_time_($(".btn-vCode"),60);
                    common.loading(0);
                },function(e) {
                    clearTimeout(self.cdCode);
                    common.loading(0);
                    app.methods.showToastBottom("获取验证码失败");
                },false);
            },
        },
        on: {
            pageInit: function (e, page) {
                var app = this.$app;
                var self = this;
                clearTimeout(self.cdCode);
            },
            pageBeforeOut: function(e, page) {
                //outPage  sort 0
                //Do:离开页面前
                var app = this.$app;
                var self = this;
                clearTimeout(self.cdCode);

            },
        }
    }
</script>

<style scoped>
    .myrow{
        margin-left: 25px;
        margin-right: 25px;
    }

    .title{
        padding-right: 56px;
        margin: 0px auto;
    }
    .mybutton-round{
         border-radius: 6px;
         font-size: 16px;
         background-image: linear-gradient(to top, #238afb, #40affe);
     }
</style>